<template>
  <view class="home">
    <!--  -->
    <view class="container">
      <image src="../../static/imgs/Frame 11.png"></image>
      <view class=" title">
        <u-icon name="arrow-left" color="black" size="30" @click="goBack()"></u-icon>
        <text class="title_name">公告</text>
      </view>
    </view>

    <!--  -->
    <view class="box" v-if="list.length!=0">
      <view class="item" v-for="item in list" @click="goMesgeDetil()">
        <view class="notification">
          <view class="notification1">上新通知</view>
          <view class="notification2">2023-7-21</view>
        </view>

        <view class="content">
          尊敬的回声AI用户：感谢您一直以来对我们产品的支持和信任！我们非常高兴地宣布，我们的产品经过一段时间的努力开发和优化，将在2023年7月10日晚上10点-2023年7月11号早上8点进行更新，推出2.0新版本。此次更新主要包含以下内容：
        </view>

        <view class="golook">
          <text>去看看</text>
          <u-icon name="arrow-right" color="#666666" size="24" style="margin-left: 10rpx;"></u-icon>
        </view>
      </view>
    </view>

    <!--  -->
    <view class="backgimg" v-else>
      <image src="../../static/imgs/image 84@2x.png" mode=""></image>
      <view class="">暂无消息</view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [{
            name: 1
          },
          {
            name: 1
          },
          {
            name: 1
          }
        ],
        lists: []
      }
    },
    methods: {
      goMesgeDetil() {
        uni.navigateTo({
          url: './message_details'
        })
      },
      goBack() {
        uni.navigateBack({
          delta: 1
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .home {
    position: relative;
  }

  .container {
    position: relative;
    width: 750rpx;
    height: 320rpx;

    >image {
      width: 100%;
      height: 100%;
    }

    .title {
      position: absolute;
      top: 122rpx;
      left: 32rpx;
      font-weight: bold;
      color: #333333;

      .title_name {
        color: #805F20;
        font-size: 32rpx;
        margin-left: 280rpx;
      }
    }
  }

  // 
  .box {
    position: absolute;
    top: 200rpx;
    left: 32rpx;

    .item {
      margin-bottom: 20rpx;
      width: 686rpx;
      height: 332rpx;
      background: #FFFFFF;
      box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(190, 162, 111, 0.2);
      border-radius: 20rpx 20rpx 20rpx 20rpx;

      .notification {
        display: flex;
        justify-content: space-between;
        padding: 32rpx 32rpx 15rpx;
        border-bottom: 1rpx solid #E3E3E3;

        .notification1 {
          font-size: 28rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #333333;
        }

        .notification2 {
          font-size: 24rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #666666;
        }
      }
    }

    .content {
      padding: 32rpx 32rpx 20rpx;
      height: 170rpx;
      font-size: 24rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #999999;

      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      /* 显示的行数 */
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .golook {
      padding: 25rpx 32rpx;
      text-align: right;
      font-size: 24rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #666666;
    }

    // 
  }

  .backgimg {
    text-align: center;
    font-size: 28rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #999999;
    position: absolute;
    top: 190rpx;
    left: 158rpx;
    margin: 307rpx auto;

    >image {
      width: 434rpx;
      height: 434rpx;
    }
  }
</style>